<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MarsPay支付系统 - 首页</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #ffe60f;
            --primary-dark: #ffd700;
            --primary-light: #fff8c4;
            --text-dark: #333;
            --text-gray: #666;
        }

        body {
            background: linear-gradient(180deg, #fff 0%, #f8f8f8 100%);
            min-height: 100vh;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            box-shadow: 0 2px 15px rgba(255, 230, 15, 0.3);
            padding: 1rem 0;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text-dark) !important;
        }

        .nav-link {
            color: var(--text-dark) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .hero-section {
            padding: 60px 0 40px;
            text-align: center;
        }

        .hero-title {
            font-size: 2.8rem;
            font-weight: bold;
            color: var(--text-dark);
            margin-bottom: 15px;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: var(--text-gray);
        }

        .card-product {
            border: none;
            border-radius: 20px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%;
            overflow: hidden;
            background: white;
        }

        .card-product:hover {
            transform: translateY(-12px);
            box-shadow: 0 16px 40px rgba(255, 230, 15, 0.3);
        }

        .product-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 2.5rem;
        }

        .product-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

        .product-desc {
            color: var(--text-gray);
            margin-bottom: 20px;
            font-size: 0.95rem;
        }

        .price-tag {
            font-size: 2.2rem;
            font-weight: bold;
            color: #ff6b6b;
            margin: 20px 0;
        }

        .btn-purchase {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: var(--text-dark);
            border: none;
            padding: 14px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 230, 15, 0.4);
        }

        .btn-purchase:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 25px rgba(255, 230, 15, 0.5);
        }

        /* 订单列表区域 */
        .order-list-section {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            margin-top: 40px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .order-card-mini {
            background: linear-gradient(135deg, #f8f8f8 0%, white 100%);
            border: 2px solid #e8e8e8;
            border-radius: 12px;
            padding: 15px 20px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .order-card-mini:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 15px rgba(255, 230, 15, 0.2);
            transform: translateX(5px);
        }

        .order-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .order-row:last-child {
            margin-bottom: 0;
        }

        .order-main-info {
            flex: 1;
        }

        .order-product {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 5px;
        }

        .order-meta {
            font-size: 0.85rem;
            color: var(--text-gray);
        }

        .order-amount {
            font-size: 1.3rem;
            font-weight: bold;
            color: #ff6b6b;
            margin: 0 15px;
        }

        .order-action {
            display: flex;
            gap: 8px;
        }

        .btn-pay-mini {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: var(--text-dark);
            border: none;
            padding: 6px 16px;
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: 20px;
        }

        .btn-pay-mini:hover {
            transform: scale(1.05);
        }

        .pagination-custom {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .page-btn {
            padding: 8px 16px;
            border: 2px solid #e8e8e8;
            border-radius: 8px;
            background: white;
            color: var(--text-dark);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .page-btn:hover {
            border-color: var(--primary-color);
            background: var(--primary-light);
            color: var(--text-dark);
        }

        .page-btn.active {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            border-color: var(--primary-color);
            font-weight: 600;
        }

        .page-btn.disabled {
            opacity: 0.5;
            pointer-events: none;
        }

        .footer-custom {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: var(--text-dark);
            padding: 30px 0;
            margin-top: 80px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-custom">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-rocket-takeoff"></i> MarsPay
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/order/list">
                            <i class="bi bi-list-check"></i> 全部订单
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://gitee.com/Marsfactory/mars-pay" target="_blank">
                            <i class="bi bi-github"></i> 源码
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="hero-section">
        <div class="container">
            <h1 class="hero-title">🚀 MarsPay支付系统</h1>
            <p class="hero-subtitle">支持微信支付 & 支付宝支付</p>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="container mb-5">
        <!-- 商品卡片 -->
        <div class="row g-4 mb-5">
            <div class="col-md-4">
                <div class="card card-product">
                    <div class="card-body text-center p-4">
                        <div class="product-icon">
                            <i class="bi bi-star-fill" style="color: #ff6b6b;"></i>
                        </div>
                        <h4 class="product-title">VIP会员月卡</h4>
                        <p class="product-desc">享受更多特权服务</p>
                        <div class="price-tag">¥9.90</div>
                        <button class="btn btn-purchase w-100" onclick="showOrderModal('VIP会员月卡', '享受更多特权服务', 29.90)">
                            <i class="bi bi-cart-plus"></i> 立即购买
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-product">
                    <div class="card-body text-center p-4">
                        <div class="product-icon">
                            <i class="bi bi-coin" style="color: #ffa500;"></i>
                        </div>
                        <h4 class="product-title">金币充值-100个</h4>
                        <p class="product-desc">游戏金币充值</p>
                        <div class="price-tag">¥1.0</div>
                        <button class="btn btn-purchase w-100" onclick="showOrderModal('金币充值-100个', '游戏金币充值', 1.0)">
                            <i class="bi bi-cart-plus"></i> 立即购买
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-product">
                    <div class="card-body text-center p-4">
                        <div class="product-icon">
                            <i class="bi bi-book-fill" style="color: #007bff;"></i>
                        </div>
                        <h4 class="product-title">课程-Java全栈开发</h4>
                        <p class="product-desc">从入门到精通</p>
                        <div class="price-tag">¥19.9</div>
                        <button class="btn btn-purchase w-100" onclick="showOrderModal('课程-Java全栈开发', '从入门到精通', 19.9)">
                            <i class="bi bi-cart-plus"></i> 立即购买
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近订单 -->
        <div class="order-list-section" th:if="${totalCount > 0}">
            <div class="section-header">
                <h5 class="section-title">
                    <i class="bi bi-clock-history" style="color: var(--primary-color);"></i>
                    最近订单
                </h5>
                <a href="/order/list" class="btn btn-outline-dark btn-sm">
                    查看全部 <i class="bi bi-arrow-right"></i>
                </a>
            </div>

            <!-- 订单列表 -->
            <div th:each="order : ${orders}">
                <div class="order-card-mini">
                    <div class="order-row">
                        <div class="order-main-info">
                            <div class="order-product" th:text="${order.productName}">商品名称</div>
                            <div class="order-meta">
                                <span th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}">2025-01-01 12:00</span>
                                <span class="mx-2">|</span>
                                <span th:text="${order.orderNo}">ORDER001</span>
                            </div>
                        </div>
                        <div class="order-amount" th:text="'¥' + ${order.amount}">¥0.00</div>
                        <div class="order-action">
                            <button th:if="${order.status == 0}"
                                    class="btn btn-pay-mini"
                                    th:onclick="'payOrder(' + ${order.id} + ')'">
                                去支付
                            </button>
                            <span th:if="${order.status == 2}"
                                  class="badge"
                                  style="background: #52c41a; color: white; padding: 6px 12px; border-radius: 20px;">
                                已支付
                            </span>
                            <span th:if="${order.status == 1}"
                                  class="badge"
                                  style="background: #1890ff; color: white; padding: 6px 12px; border-radius: 20px;">
                                支付中
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-custom" th:if="${totalPages > 1}">
                <a th:href="@{/(page=${currentPage - 1})}"
                   class="page-btn"
                   th:classappend="${currentPage == 1} ? 'disabled' : ''">
                    <i class="bi bi-chevron-left"></i> 上一页
                </a>

                <a th:each="i : ${#numbers.sequence(1, totalPages)}"
                   th:href="@{/(page=${i})}"
                   th:text="${i}"
                   class="page-btn"
                   th:classappend="${i == currentPage} ? 'active' : ''">
                    1
                </a>

                <a th:href="@{/(page=${currentPage + 1})}"
                   class="page-btn"
                   th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                    下一页 <i class="bi bi-chevron-right"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer-custom text-center">
        <div class="container">
            <p class="mb-0">&copy; 2025 Mars Pay. All rights reserved.</p>
        </div>
    </footer>

    <!-- 订单确认模态框 -->
    <div class="modal fade" id="orderModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 20px; border: none;">
                <div class="modal-header" style="background: linear-gradient(135deg, var(--primary-light) 0%, #fff 100%); border-bottom: 2px solid var(--primary-color);">
                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-cart-check"></i> 确认订单
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">商品名称</label>
                        <input type="text" class="form-control" id="productName" readonly style="background: #f8f8f8; border-radius: 8px;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">商品描述</label>
                        <input type="text" class="form-control" id="productDesc" readonly style="background: #f8f8f8; border-radius: 8px;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">支付金额 <span class="text-danger">*</span></label>
                        <div class="input-group" style="border-radius: 8px; overflow: hidden;">
                            <span class="input-group-text" style="background: var(--primary-color); border: none; font-weight: bold;">¥</span>
                            <input type="number" class="form-control" id="orderAmount" min="0.01" step="0.01" placeholder="请输入金额" style="border: 2px solid var(--primary-color); font-size: 1.2rem; font-weight: 600;">
                        </div>
                        <small class="text-muted">参考价格：¥<span id="suggestPrice">0.00</span></small>
                    </div>
                    <button class="btn w-100 btn-purchase" style="padding: 14px;" onclick="confirmOrder()">
                        <i class="bi bi-check-circle"></i> 确认并选择支付方式
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 支付方式选择模态框 -->
    <div class="modal fade" id="paymentModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 20px; border: none;">
                <div class="modal-header" style="background: linear-gradient(135deg, var(--primary-light) 0%, #fff 100%); border-bottom: 2px solid var(--primary-color);">
                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-credit-card"></i> 选择支付方式
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="alert alert-info" id="orderInfo" style="border-radius: 12px;"></div>
                    <div class="row g-3">
                        <div class="col-4">
                            <button class="btn w-100 p-3" style="background: #07c160; color: white; border-radius: 12px; border: none;" onclick="pay('wechat')">
                                <i class="bi bi-wechat" style="font-size: 2rem;"></i><br>
                                <span class="mt-2 d-block" style="font-size: 0.9rem;">微信支付</span>
                            </button>
                        </div>
                        <div class="col-4">
                            <button class="btn w-100 p-3" style="background: #1678ff; color: white; border-radius: 12px; border: none;" onclick="pay('alipay')">
                                <i class="bi bi-alipay" style="font-size: 2rem;"></i><br>
                                <span class="mt-2 d-block" style="font-size: 0.9rem;">支付宝</span>
                            </button>
                        </div>
                        <div class="col-4">
                            <button class="btn w-100 p-3" style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: #333; border-radius: 12px; border: none; font-weight: 600;" onclick="pay('union')">
                                <i class="bi bi-qr-code-scan" style="font-size: 2rem;"></i><br>
                                <span class="mt-2 d-block" style="font-size: 0.9rem;">聚合支付</span>
                            </button>
                        </div>
                    </div>
                    <div class="alert alert-warning mt-3" style="border-radius: 12px; font-size: 0.9rem;">
                        <i class="bi bi-lightbulb"></i>
                        <strong>聚合支付：</strong>一码通付，微信/支付宝扫码自动识别
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let currentOrderId = null;
        let currentProductName = '';
        let currentProductDesc = '';
        let orderModal = null;
        let paymentModal = null;

        document.addEventListener('DOMContentLoaded', function() {
            orderModal = new bootstrap.Modal(document.getElementById('orderModal'));
            paymentModal = new bootstrap.Modal(document.getElementById('paymentModal'));
        });

        // 显示订单确认模态框
        function showOrderModal(productName, productDesc, suggestPrice) {
            currentProductName = productName;
            currentProductDesc = productDesc;

            document.getElementById('productName').value = productName;
            document.getElementById('productDesc').value = productDesc;
            document.getElementById('orderAmount').value = suggestPrice;
            document.getElementById('suggestPrice').innerText = suggestPrice.toFixed(2);

            orderModal.show();
        }

        // 确认订单（创建订单）
        function confirmOrder() {
            const amount = parseFloat(document.getElementById('orderAmount').value);

            // 验证金额
            if (!amount || amount <= 0) {
                alert('❌ 请输入有效的金额！');
                return;
            }

            if (amount > 999999) {
                alert('❌ 金额不能超过 999,999 元！');
                return;
            }

            // 隐藏订单确认框
            orderModal.hide();

            // 创建订单
            fetch('/order/create', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `productName=${encodeURIComponent(currentProductName)}&productDesc=${encodeURIComponent(currentProductDesc)}&amount=${amount}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    currentOrderId = data.data.id;
                    document.getElementById('orderInfo').innerHTML = `
                        <div class="d-flex justify-content-between align-items-center">
                            <span><strong>商品：</strong>${currentProductName}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <span><strong>金额：</strong></span>
                            <span class="fs-4 fw-bold" style="color: #ff6b6b;">¥${amount.toFixed(2)}</span>
                        </div>
                    `;
                    paymentModal.show();
                } else {
                    alert('❌ 创建订单失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('❌ 创建订单失败，请重试');
            });
        }

        function payOrder(orderId) {
            currentOrderId = orderId;
            document.getElementById('orderInfo').innerHTML = `
                <div class="text-center">
                    <strong>选择支付方式继续支付</strong>
                </div>
            `;
            paymentModal.show();
        }

        function pay(type) {
            if (!currentOrderId) {
                alert('订单ID不存在');
                return;
            }

            paymentModal.hide();

            if (type === 'wechat') {
                window.location.href = `/pay/wechat/${currentOrderId}`;
            } else if (type === 'alipay') {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/pay/alipay/${currentOrderId}`;
                document.body.appendChild(form);
                form.submit();
            } else if (type === 'union') {
                // 聚合支付
                window.location.href = `/pay/union/${currentOrderId}`;
            }
        }
    </script>
</body>
</html>
